/* eslint-disable vue/require-default-prop */
<template>
  <div id="topo2box" class="bar-box" style="height:600px;" />
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    // barData: {
    //   type: Object
    // }
  },
  data() {
    return {
      // 基于准备好的dom，初始化echarts实例
      myChart: null
    }
  },
  watch: {
    // barData: function() {
    //   this.myChart.setOption(this.barData)
    // }
  },
  created() {},
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('topo2box'))
    console.log('--------------this.options:', this.barData)
    const flower = ''
    const heart = ''

    const dcg = ''

    const xxm = ''
    // 节点信息
    var nodes = [
      {
        x: 0,
        y: 1000,
        nodeName: '大春哥',
        imgPath: dcg,
        symbolSize: 70
      },
      {
        x: 200,
        y: 800,
        nodeName: '小熊',
        imgPath: xxm,
        symbolSize: 50
      },
      {
        x: 0,
        y: 0,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      },

      {
        x: 200,
        y: 0,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      },

      {
        x: 400,
        y: 0,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      },

      {
        x: 600,
        y: 0,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      },

      {
        x: 800,
        y: 0,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      },

      {
        x: 1000,
        y: 900,
        nodeName: '小小熊',
        imgPath: xxm,
        symbolSize: 50
      }

    ]
    var charts = {
      nodes: [],
      linesData1: [
        {
          coords: [
            [0, 1000],
            [200, 800]
          ]
        }
      ],
      linesData2: [
        {
          coords: [
            [200, 800],
            [0, 0]
          ]
        },
        {
          coords: [
            [200, 800],
            [200, 0]
          ]
        },
        {
          coords: [
            [200, 800],
            [400, 0]
          ]
        },
        {
          coords: [
            [200, 800],
            [600, 0]
          ]
        },
        {
          coords: [
            [200, 800],
            [800, 0]
          ]
        },
        {
          coords: [
            [200, 800],
            [1000, 900]
          ]
        }
      ],
      linesData3: [
        {
          coords: [
            [200, 800],
            [300, 750],
            [400, 700],
            [600, 800],
            [1000, 900]
          ]
        }

      ]
    }
    for (var j = 0; j < nodes.length; j++) {
      const { x, y, nodeName, imgPath, symbolSize } = nodes[j]
      var node = {
        nodeName,
        value: [x, y],
        symbolSize: symbolSize || 50,
        symbol: 'image://' + imgPath,
        itemStyle: {
          'border-radius': '50%'
        }
      }
      charts.nodes.push(node)
    }

    const option = {
      backgroundColor: '#fff',
      xAxis: {
        min: 0,
        max: 1000,
        show: false,
        type: 'value'
      },
      yAxis: {
        min: 0,
        max: 1000,
        show: false,
        type: 'value'
      },
      series: [

        {
          type: 'lines',
          polyline: false,
          coordinateSystem: 'cartesian2d',
          clip: false,
          lineStyle: {
            type: 'dotted',
            width: 2,
            color: () => `hsla(${0}, ${0}, ${0}, 1)`,
            curveness: 0
          },
          effect: {
            show: true,
            trailLength: 0,
            symbol: 'image://' + heart,
            color: 'red',
            symbolSize: 50
          },
          data: charts.linesData1
        },
        {
          type: 'lines',
          polyline: false,
          clip: false,
          coordinateSystem: 'cartesian2d',
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: '#fa1b49',
            curveness: 0.2
          },
          effect: {
            show: true,
            trailLength: 0,
            symbol: 'image://' + flower,
            color: 'green',
            symbolSize: 50
          },
          data: charts.linesData2
        },
        {
          type: 'lines',
          clip: false,
          polyline: true,
          coordinateSystem: 'cartesian2d',
          lineStyle: {
            type: 'dashed',
            width: 1,
            color: 'green',
            curveness: 1
          },
          effect: {
            show: true,
            trailLength: 0,
            symbol: 'image://' + flower,
            color: 'green',
            symbolSize: 50
          },
          data: charts.linesData3
        },
        {
          type: 'graph',
          coordinateSystem: 'cartesian2d',
          label: {
            show: true,
            position: 'bottom',
            color: '#c23531',
            formatter: function(item) {
              return item.data.nodeName
            }
          },
          data: charts.nodes
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option)
  }
}
</script>

<style>
.bar-box {
  background: #fff;
  padding: 10px;
  margin-top: 30px;
}
</style>
